<template>
  <div ref="node"
       :style="flowNodeContainer"
       @mouseenter="showDelete"
       @mouseleave="hideDelete"
       @mouseup="changeNodeSite"
       disabled
       :mask="false">
    <div :class="['node',(node.nodeName === $t('processDialog.nodeName.start')||node.nodeName === $t('processDialog.nodeName.end'))?'radio-node':'',menuClass[node.nodeType],isSelection?'selection':'',isLast && !isDrag?'last':'',limit?'limit':'']">
      <transition name="el-fade-in">
        <i v-show="mouseEnter"
           class="el-icon-rank avue-flow__node-drag"></i>
      </transition>
      <transition name="el-fade-in">
        <i v-show="mouseEnter"
           class="el-icon-delete myDelete"></i>
      </transition>
      {{node.nodeName}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'flow',
  props: {
    active: [String, Number],
    index: [String, Number],
    node: Object,
    isDrag: Boolean,
    isSelection: Boolean,
    isLast: Boolean,
    limit: {
      type: Boolean,
      default: false
    },
    scale: Number
  },
  data () {
    return {
      // 控制节点操作显示
      mouseEnter: false,
      menuClass: {
        3: 'user',
        4: 'meet',
        5: 'email',
        6: 'back',
        7: 'sign'
      }
    }
  },
  watch: {
    scale () {
      // this.$refs.node.style.zoom = this.scale
    }
  },
  computed: {
    // 节点容器样式
    flowNodeContainer: {
      get () {
        return {
          position: 'absolute',
          top: this.setPx(this.node.topCoord),
          left: this.setPx(this.node.leftCoord),
          // boxShadow: this.mouseEnter ? '#66a6e0 0px 0px 12px 0px' : '',
          backgroundColor: 'transparent',
          cursor: 'pointer',
        }
      }
    }
  },
  methods: {
    // 鼠标进入
    showDelete () {
      this.mouseEnter = true
      if (!this.isDrag || this.limit) this.mouseEnter = false
    },
    // 鼠标离开
    hideDelete () {
      this.mouseEnter = false
    },
    // 鼠标移动后抬起
    changeNodeSite (event) {
      // 删除
      if (event.path[0].classList.contains('myDelete')) {
        if (this.node.isDeletable !== 1) {
          this.$message.warning(this.$t('processDialog.cannotDeleteNode'))
          return
        }
        this.$emit('deleteNode', this.node)
        return
      }
      // 避免抖动
      if (this.node.leftCoord == parseInt(this.$refs.node.style.left, 10) && this.node.topCoord == parseInt(this.$refs.node.style.top, 10)) {
        this.$emit('clickNode', {
          node: this.node,
          index: this.index
        })
        return
      }
      this.$emit('changeNodeSite', {
        index: this.index,
        left: Number(this.$refs.node.style.left.replace('px', '')),
        top: Number(this.$refs.node.style.top.replace('px', '')),
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.node {
  border: 1px solid #aaa;
  border-radius: 5px;
  position: relative;
  width: 150px;
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.last {
  box-shadow: #ff1100 0 0 3px 1px;
}
.limit {
  background: #f8fafb;
  color: #999;
}
.radio-node {
  border-radius: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  & i {
    margin: 0 0 5px 0;
  }
}
.myDelete {
  margin-right: 5px;
}
.user::before {
  content: "";
  width: 100%;
  height: 5px;
  background: #51be79;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.meet::before {
  content: "";
  width: 100%;
  height: 5px;
  background: #beace6;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.email::before {
  content: "";
  width: 100%;
  height: 5px;
  background: #a8d5f7;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.back::before {
  content: "";
  width: 100%;
  height: 5px;
  background: #b5c5d3;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.sign::before {
  content: "";
  width: 100%;
  height: 5px;
  background: #ffc470;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
